<template>
  <a-modal
    title="新增报表"
    :visible="visible"
    ok-text='确定'
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-form-model ref='form' :model='queryParam' :rules='validatorRules'>
      <a-form-model-item label='年份' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='year'>
        <a-date-picker
          mode="year"
          placeholder="请选择年份"
          format='YYYY'
          value-format="yyyy-MM-dd"
          v-model='queryParam.year'
          :open='yearPickShow'
          style='width: 100%'
          @panelChange="handlePanelChange"
          @openChange="handleOpenChange"/>
      </a-form-model-item>
      <a-form-model-item label='季度' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='quarter'>
        <j-dict-select-tag style='width: 100%' v-model="queryParam.quarter" placeholder="请选择" dict-code="sys_quarter"/>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
  import moment from 'moment'

  export default {
    name: 'UserModal',
    components: {},
    data() {
      return {
        queryParam: {
          year: '',
          quarter: ''
        },
        yearPickShow: false,
        visible: false,
        validatorRules: {
          year: [{required: true, message: '请选择年度!'}],
          quarter: [{required: true, message: '请输入季度!'}]
        },
        labelCol: {
          xs: {span: 24},
          sm: {span: 5}
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16}
        },
      }
    },
    created() {

    },
    methods: {
      handleSubmit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.visible = false
            this.$emit('openModelView', this.queryParam)
            this.queryParam = {
              year:''
            }
          } else {
            return false
          }
        })
      },
      handleCancel(e) {
        this.queryParam = {
          year:''
        }
        this.visible = false;
      },
      moment,
      // 得到年份选择器的值
      handlePanelChange(value) {
        this.queryParam.year = moment(value).format('YYYY')
        this.yearPickShow = false
        this.$refs.form.validateField('year', (error) => {
          console.log(error)
        })
      },
      // 弹出日历和关闭日历的回调
      handleOpenChange(status) {
        this.yearPickShow = status
      },
    }
  }
</script>

<style scoped>

</style>
